<!DOCTYPE html>
<html>
<head>
    <title>Optical Reflection from a Moving Interface</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="420" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'black';

    // General drawing settings
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = "24px 'KaiTi', 'SimSun', serif"; // Font for Chinese characters

    // Center point for reflection
    const cx = 250;
    const cy = 200;

    // --- 1. Draw the interface and the medium ---
    // The medium is represented as a block. The curved sides suggest a cross-section.
    ctx.beginPath();
    ctx.moveTo(50, cy); // Start top-left
    ctx.quadraticCurveTo(40, cy + 50, 50, cy + 100); // Left curved side
    ctx.lineTo(450, cy + 100); // Bottom line
    ctx.quadraticCurveTo(460, cy + 50, 450, cy); // Right curved side
    ctx.closePath(); // Closes path to the top line (interface)
    ctx.stroke();

    // --- 2. Draw Text Labels for Media ---
    ctx.fillText('真空', 380, 160); // "真空" means Vacuum
    ctx.fillText('介质', 230, 260); // "介质" means Medium

    // --- 3. Draw the Normal Line ---
    ctx.beginPath();
    ctx.setLineDash([5, 5]); // Dashed line style
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx, cy - 120);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Helper function to draw arrowheads ---
    function drawArrowhead(ctx, fromX, fromY, toX, toY, size) {
        const angle = Math.atan2(toY - fromY, toX - fromX);
        ctx.save();
        ctx.translate(toX, toY);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2.5);
        ctx.lineTo(-size, size / 2.5);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- 4. Draw Incident and Reflected Rays ---
    const angleDeg = 40;
    const angleRad = angleDeg * Math.PI / 180;
    const rayLength = 150;

    // Incident ray coordinates
    const startX_inc = cx - rayLength * Math.sin(angleRad);
    const startY_inc = cy - rayLength * Math.cos(angleRad);
    
    // Reflected ray coordinates
    const endX_ref = cx + rayLength * Math.sin(angleRad);
    const endY_ref = cy - rayLength * Math.cos(angleRad);

    // Draw incident ray
    ctx.beginPath();
    ctx.moveTo(startX_inc, startY_inc);
    ctx.lineTo(cx, cy);
    ctx.stroke();
    // Arrowhead on incident ray
    const arrowX_inc = (startX_inc + cx) / 2;
    const arrowY_inc = (startY_inc + cy) / 2;
    drawArrowhead(ctx, startX_inc, startY_inc, arrowX_inc, arrowY_inc, 12);

    // Draw reflected ray
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(endX_ref, endY_ref);
    ctx.stroke();
    // Arrowhead on reflected ray
    const arrowX_ref = (cx + endX_ref) / 2;
    const arrowY_ref = (cy + endY_ref) / 2;
    drawArrowhead(ctx, cx, cy, arrowX_ref, arrowY_ref, 12);

    // --- 5. Draw Angle Markings ---
    const arcRadius = 40;
    ctx.lineWidth = 1.5;

    // Angle of incidence (θi) arc
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, -Math.PI / 2 - angleRad, -Math.PI / 2, false);
    ctx.stroke();

    // Angle of reflection (θr) arc
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, -Math.PI / 2, -Math.PI / 2 + angleRad, false);
    ctx.stroke();
    
    // Right angle marker between normal and surface
    const markerSize = 18;
    ctx.beginPath();
    ctx.moveTo(cx, cy - markerSize);
    ctx.lineTo(cx - markerSize, cy - markerSize);
    ctx.lineTo(cx - markerSize, cy);
    ctx.stroke();


    // --- 6. Draw Angle Labels (θi, θr) ---
    ctx.font = "italic 22px 'Times New Roman'";
    // Position for θi
    ctx.fillText('θ', cx - 65, cy - 30);
    ctx.font = "italic 16px 'Times New Roman'";
    ctx.fillText('i', cx - 54, cy - 26);

    // Position for θr
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText('θ', cx + 40, cy - 30);
    ctx.font = "italic 16px 'Times New Roman'";
    ctx.fillText('r', cx + 52, cy - 26);

    // --- 7. Draw Velocity Vector 'u' ---
    ctx.lineWidth = 2;
    const u_x = 250;
    const u_y_start = 330;
    const u_y_end = 380;

    ctx.beginPath();
    ctx.moveTo(u_x, u_y_start);
    ctx.lineTo(u_x, u_y_end);
    ctx.stroke();
    drawArrowhead(ctx, u_x, u_y_start, u_x, u_y_end, 12);

    // Label for 'u'
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText('u', u_x - 25, u_y_start + 30);

</script>

</body>
</html>